<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <title>查看用户</title>
        <%-- 全站样式 --%>
        <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    
        <style>
            tr, th ,td{
                text-align: center;
            }
        </style>
    </head>

    <body class="page-body skin-navy">
        <div class="page-container">
           <%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
            <div class="main-content">
                <%--导航栏 --%>
				<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>
                <div class="page-title">
                    <div class="title-env">
                        <h1 class="title">查看用户列表</h1>
                        <p class="description">
                            您可以在此页面上查看用户列表及其用户的详细信息以及冻结账户。
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="panel panel-default panel-tabs">
                        <!-- Add class "collapsed" to minimize the panel -->
                        <div class="panel-heading">
                            <h3 class="panel-title">用户列表</h3>
                            <div class="panel-options">
                                <ul class="nav nav-tabs" id="nav_tabs">
                                    <li class="active">
                                        <a href="#user" data-toggle="tab">管理員</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="user">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th>用户编号</th>
                                                    <th>用户名称</th>
                                                    <th>邮箱</th>
                                                    <th>状态</th>
                                                    <th>冻结期限</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody class="middle-align" id="middle-align">
                                               	<c:forEach items="${admin}" var="user">
                                                <tr>
                                                    <td>${user['userID']}</td>
                                                    <td>${user['name']}</td>
                                                    <td>${user['email']}</td>
                                                    <td>${user['status']==0?"已冻结":user['status']==1?"在线":"离线"}</td>
                                                    <th>${user['freezeTime']}</th>
                                                    <td>
                                                        <a data-userID="4" onclick="showPersonInfo(${user['userID']})"
                                                           class="userDetail btn btn-info btn-sm btn-icon icon-left" data-toggle="modal" data-target="#modal-2">详细信息</a>
                                                        <a href="#" class="freezzORThaw btn btn-danger btn-sm btn-icon icon-left " data-toggle="modal" data-target="#freeze" >
                                                            ${user['status']==0?"解冻":"冻结"}
                                                        </a>
                                                        
                                                    </td>
                                                </tr>
                                                </c:forEach>
                                                 </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

		<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
            </div>
        </div>

        <div class="page-loading-overlay">
            <div class="loader-2"></div>
        </div>
        <div class="modal fade" id="modal-2"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">详细信息</h4>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6">

                                        <div class="form-group">
                                            <label for="field-1" class="control-label">用户编号</label>

                                            <input type="text" class="form-control" id="userID" placeholder="001" disabled/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">

                                        <div class="form-group">
                                            <label for="field-1" class="control-label">真实姓名</label>

                                            <input type="text" class="form-control" id="name" placeholder="John" disabled/>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                          <div class="form-group">
                                            <label for="field-1" class="control-label">性别</label>

                                            <input type="text" class="form-control" id="sex" placeholder="男" disabled/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="field-1" class="control-label">出生年月</label>

                                            <input type="text" class="form-control" id="birthday" placeholder="2011年11月11日" disabled/>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="field-1" class="control-label">邮箱地址</label>
                                            <input type="text" class="form-control" id="email" placeholder="user@qq.com" disabled/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="field-1" class="control-label">手机号码</label>
                                            <input type="text" class="form-control" id="phoneNumber" placeholder="123456789789" disabled/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <img src="../assets/images/user-4.png" alt="user-img" class="img-cirlce img-responsive img-thumbnail" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">身份证号</label>

                                    <input type="text" class="form-control" id="IdCard" placeholder="3601111111111111111111" disabled/>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">个人地址</label>

                                    <input type="text" class="form-control" id="personAddress" placeholder="xxxxxxxxx" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">工作地址</label>

                                    <textarea class="form-control autogrow" cols="5" id="workAddress" placeholder="xxxxxxxxxxxxxxxx" disabled></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-sm" id="freeze"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 id="messageTitie" class="modal-title"></h4>
                    </div>

                    <div class="modal-body">
                            <div style="text-align: center;">
                                <h4 id="messageBody"></h4>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-white" data-dismiss="modal" id="yes" >确定</button>
                    </div>
                </div>
            </div>
        </div>
        

        <%-- 尾部内容 --%>
        <jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
        
        <!-- Imported styles on this page -->
        <link rel="stylesheet" href="assets/js/datatables/dataTables.bootstrap.css">
        <!-- Imported scripts on this page -->
        <script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
        <script src="assets/js/datatables/dataTables.bootstrap.js"></script>
        <script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
        <!--Specific JS for this page-->
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $("#example-1").dataTable({
                    aLengthMenu: [
                        [5, 10, 25, 50, 100, -1],
                        [5, 10, 25, 50, 100, "所有"]
                    ]
                });
                $("#example-2").dataTable({
                    aLengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, "All"]
                    ]
                });
                // Replace checkboxes when they appear
                var $state = $("#example-2 thead input[type='checkbox']");

                $("#example-2").on('draw.dt', function() {
                    cbr_replace();

                    $state.trigger('change');
                });

                // Script to select all checkboxes
                $state.on('change', function(ev) {
                    var $chcks = $("#example-2 tbody input[type='checkbox']");

                    if($state.is(':checked')) {
                        $chcks.prop('checked', true).trigger('change');
                    } else {
                        $chcks.prop('checked', false).trigger('change');
                    }
                });
            });
        </script>
        <script type="text/javascript">
        function showPersonInfo(id){

	      	 	 $.ajax({  
	              	    type : 'POST',  
	                    url : '/showPersonInfo.do',  
	                    data: { "PersonUserID": id }, 
	                    success : function(datas)  
	                    {  
	                     
	                      var email = datas.data[0].email;
	                      var IdCard = datas.data[0].IdCard;
	                      var name = datas.data[0].name;
	                      var sex = datas.data[0].sex==1?"男":"女";
	                      var birthday = datas.data[0].birthday;
	                      var userID = datas.data[0].userID;
	                      var phoneNumber = datas.data[0].phoneNumber;
	                      var workAddress = datas.data[0].workAddress;
	                      var personAddress = datas.data[0].personAddress;
	                      
	                      
	                      $("#email").val(email);
	                      $("#IdCard").val(IdCard);
	                      $("#name").val(name);
	                      $("#sex").val(sex);
	                      $("#birthday").val(birthday);
	                      $("#userID").val(userID);
	                      $("#phoneNumber").val(phoneNumber);
	                      $("#workAddress").val(workAddress);
	                      $("#personAddress").val(personAddress);
	                      
	                    },  
	                    error : function()  
	                    {  
	                    	alert("error");
	                    }  
	                });  
        }
        </script>
        <script type="text/javascript">
        jQuery(document).ready(function($) {

			// Delete Modal-1 
        	$('.freezzORThaw').on('click',function(){
        		var text = $(this).text().trim();
        		var userID = $(this).parent().prev().prev().prev().prev().prev().text();

        		if(text=="冻结"){
        			$("#messageTitie").text("冻结用户编号"+userID);
        			$("#messageBody").text("您确定要冻结该用户吗？");
        		}else{
        			$("#messageTitie").text("解冻用户编号"+userID);
        			$("#messageBody").text("您确定要解冻该用户吗？");
        		}
        		
        	});

		});
        </script>
        <script type="text/javascript">
        	$("#yes").click(function(){
        		var title = $("#messageTitie").text();
        		var Body = $("#messageBody").text();
       			var userID = title.substring(6,title.length); 
        		console.log(userID);
        		console.log("/adminFreezeUser.do?personUserID="+userID);
        		Body == "您确定要冻结该用户吗？" ? $.post("/adminFreezeUser.do",{"personUserID":userID},function(data){
        			alert("成功冻结");
        			window.location.reload();
        		  }):$.post("/adminThawUser.do",{"personUserID":userID},function(data){
        			  alert("成功解冻");
        			  window.location.reload();
        		  });
        	});
        </script>
    </body>

</html>